<template>
  <div>
    <div class="banner" @click="handleBanner">
      <img src="//img1.qunarzz.com/sight/p0/201403/07/bfbbadbff58bedf17734a133fbf5972a.jpg_600x330_d5470d03.jpg" />
      <div class="banner-info">
        <div class="banner-title">南通博物苑(AAAA景区)</div>
        <div class="banner-number"><span class="iconfont banner-icon">&#xe692;</span><span>39</span></div>
      </div>
    </div>
    <Gallary :imgs="imgs" v-show="showCallary" @close="handleCallaryClose" />
  </div>
</template>
<script>
import Gallary from 'common/gallary/Gallary';
export default {
  name: 'Banner',
  data () {
    return {
      imgs: [
        'http://img1.qunarzz.com/sight/p0/201301/14/2b1e2f7f6d2e0fa693835fbb.png_r_800x800_3f1e73cb.png',
        'http://img1.qunarzz.com/sight/p0/201301/14/5abad90ea2ddd89993835fbb.png_r_800x800_ce9f520c.png'
      ],
      showCallary: false
    };
  },
  components: {
    Gallary
  },
  methods: {
    handleBanner () {
      this.showCallary = true;
    },
    handleCallaryClose () {
      this.showCallary = false;
    }
  }
};
</script>

<style lang="stylus" scoped>
.banner
  position relative
  overflow hidden
  height 0
  padding-bottom 55%
  img
    width 100%
  .banner-info
    display flex
    position absolute
    left 0
    right 0
    bottom 0
    line-height 0.6rem
    color #fff
    z-index 2
    background-image linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8))
    .banner-title
      flex 1
      font-size 0.32rem
      padding 0 0.2rem
    .banner-number
      padding 0 0.4rem
      height 0.4rem
      line-height 0.4rem
      border-radius 0.2rem
      margin-top 0.1rem
      background rgba(0, 0, 0, 0.8)
      font-size 0.24rem
      .banner-icon
        font-size 0.24rem
        margin-right 0.1rem
</style>
